<html>
<head>
    <style type="text/css">
        .b-twitter-message {
            font-size: 13px;
            font-family: arial;
            margin: 6px 0 0 0;
            padding: 3px 2px 3px 8px;
            word-wrap: break-word;
        }
        .b-twitter-message_active {
            background-color: rgba(0, 0, 0, 0.05);
        }
        .b-twitter {
            width: 170px;
            border: 1px solid;
            border-color: rgb(0, 0, 0);
            border-color: rgba(0, 0, 0, 0.2);
            box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.2);
        }
        .b-twitter__header {
            padding: 8px;
            
        }
        .b-twitter__homelink {
            text-decoration: none;
            font-size: 20px;
        }
    </style>
    <script>
        var dojoConfig = {
            paths: {
                "olesk": "/olesk"
            }
        };
    </script>

    <script type="text/javascript"
            src="/dj/dojo/dojo.js"
            data-dojo-config="isDebug:true">
    </script>
    
    <script type="text/javascript">
        require(["olesk/widgets/TwitterFeed/TwitterFeedWidget",
                 "dojo/io/script",
                 "dojo/dom",
                 "dojo/dom-style",
                 "dojo/fx",
                 "dojo/_base/array",
                 "dojo/domReady!"], 
        function (TwitterFeedWidget, io, dom, domStyle, fx, array) {
        	
        	var place_widget = function (params) {
        		var twits, twitterWidget, data, ii, length;
                // 
                twitterWidget = new TwitterFeedWidget({
                    'class': params.widgetDomNodeClass
                });
                // dojo hasn't reverse forEach
                data = params.data;
                length = data.length;
                for (ii = length - 1; ii > -1; ii--) {
                    twitterWidget.pushTwit({
                        text: data[ii].text
                    });
                }
                domStyle.set(twitterWidget.domNode, {
                    'height': '0',
                    'display': 'none'
                });
                twitterWidget.placeAt(params.placeAtdomNode);
                fx.wipeIn({node: twitterWidget.domNode}).play();
        	};
        	
        	io.get({
                url: "http://api.twitter.com/1/statuses/user_timeline.json",
                callbackParamName: "callback",
                content: {
                    screen_name: "firefox",
                    count: 3,
                    trim_user: 1,
                    include_rts: 1
                }     
            }).then(function (data) {
            	place_widget({
            		'data': data,
            		'placeAtdomNode': dom.byId("b-twitter"),
            		'widgetDomNodeClass': "b-twitter__message-container"
            	});	
            }, function (err) {
            	console.log("dojo.io.script: ", err);
            });
        });
    </script>
   
</head>
<body>
    <div class="b-twitter" id="b-twitter">
        <div class="b-twitter__header">
            <a class="b-twitter__homelink" href="/">@Olesk</a>
        </div>
    </div>
</body>
</html>